<template>
<div class="s-container">
    <span 
        class="substract step-btn" 
        @click.stop="substrackClick"
        v-show="value > 0"
    ></span>
    <span class="text" v-show="value > 0">{{ value }}</span>
    <span class="add step-btn" @click.stop="addClick"></span>
</div>
</template>

<script>
export default {
    name: 'Stepper',
    data () {
        return {
        }
    },
    props: {
        value: {
            type: Number,
            default: 0
        }
    },
    model: {
        prop: 'value',
        event: 'value-changed'
    },
    methods: {
        substrackClick () {
            // this.value -= 1;
            this.$emit('value-changed', this.value-1);
        },
        addClick () {
            // this.value += 1;
            this.$emit('value-changed', this.value+1);
        }
    }

}
</script>

<style lang="scss" scoped>
.s-container {
    display: flex;
    align-items: center;
    .span {
        display: inline-block;
    }
    .substract{
        background-image: url("");
    }
    .add{
        background-image: url("http://s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:9096d347/318c525df8eba9c557594305c44b2ddf.png");
    }
    .step-btn {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background-size: 50%;
        background-repeat: no-repeat;
        background-position: center center;
    }
}
</style>






